<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>

<body>
	<input type="text" name="">
	<button>查询</button>

	<ul>

	</ul>
	<script type="text/javascript">
		/*
			AJAX:是一种无需连接整个网页的情况下 能够更新部分网页的技术
			也就是js通过一个网址（url）去加载数据，整个过程用户不可见
		*/

		/*
			状态码：
			1**信息：服务器接收到请求
			2**成功：请求成狗接受并处理
			3**重定向
			4**客服端错误 语法错误或者无法完成请求


			200 成功

			400 语法错误
			401 未授权 没登录
			403 请求的资源被服务器拒绝**
			404 请求资源不存在（url）
			405 请求方法被禁用
			500 服务器内部错误
			501 服务器不支持请求功能
			502 网关错误
			503 服务器不可用
			504 网关超时

		*/
		let btn = document.querySelector('button')
		let input = document.querySelector('input')
		btn.onclick = function () {
			// 1.创建ajax对象
			//XMLHttpRequest 用于和服务器之间交换数据的 所有现在浏览器都支持
			let xhr = new XMLHttpRequest()
			console.log(xhr.readyState)

			//2.和服务器建立连接
			//xhr.open(method,url,async可省略) 
			/*
				method:get,post,put,delete
					get:获取服务信息（一般是查询）
					post:发送信息
					put:更新信息
					delete:删除信息
	
			*/
			xhr.open('get', `https://geoapi.qweather.com/v2/city/lookup?location=${input.value}&key=c494e264764449f7b4f6bf742276d7f9`)
			//3.发送数据
			//get:直接在url后面拼接 ?name = 张三&age=18&sex=男
			//post put:需要加一个请求头，并且请求头的值不同，发送的数据格式也不同，不能拼接到url上 放到xhr.send()里面

			/*
				xhr.setRequestHeader('Content-Type',value)
				Content-Type:固定值 传输的数据类型
				value：1.application/x-www-form-urlencoded
					数据格式：xhr.send('name = 张三&age=18&sex=男')
					2.application/json:
					数据格式：object = {
						name:'zhagnsan',
						age:18,
						sex:'男'
					}
					xhr.send(JSON.stringify(obj))
					
					3.multipart/form-data 上传文件
			*/

			xhr.send()

			//4.接受数据
			//readyState 改变的时候会触发onreadystatechange事件
			// readyState 存了每个阶段的状态变化 0 -4
			// 0 请求初始化 表示刚创建了Ajax
			// 1 服务器已连接 open
			// 2 数据请求已接收 xhr.send
			// 3 请求处理中
			// 4 请求已完成，相应就绪
			let ul = document.querySelector('ul')
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4) {
					// 拿到返回的数据
					let res = JSON.parse(xhr.responseText)
					// console.log(res,res.location[0].id)
					let location = res.location
					ul.innnerHTML = ''
					for (let i = 0; i < location.length; i++) {
						let li = `<li>名字${location[i].name} ---- 国家${location[i].country}</li>`
						ul.innerHTML += li
					}
				}
			}
		}
	</script>
</body>

</html>